<template>
  <a
    class="rl-link"
    :class="linkClass"
    :href="disabled || !href ? '' : href"
    :target="disabled || !href ? undefined : target"
    @click="handleClick">
    <RlIcon v-if="icon" :icon="icon"></RlIcon>
    <span class="rl-link--inner">
      <slot>Link</slot>
    </span>
    
  </a>
</template>

<script setup lang="ts">
import { linkEmits,type LinkProps } from './types';
import { computed } from 'vue';
import RlIcon from '@/components/Icon/Icon.vue'

defineOptions({
  name:'RlLink'
})
// 提供属性的默认值
const props = withDefaults(defineProps<LinkProps>(),{
  type: 'default',
  underline: false,
  disabled: false,
  target: '_self'
})
const emits = defineEmits(linkEmits)
const linkClass = computed(()=>{
  const {type, underline, disabled} = props
  return [
    `rl-link--${type}`,
    {
      'is-underline': underline,
      'is-disabled': disabled
    }
  ]
})

// 处理点击事件
const handleClick = (event: MouseEvent) => {
  if(!props.disabled){
    emits('click',event)
  }
}


</script>